<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>flex-flow属性使用</title>
</head>

<body>
    <div>
        一个复合属性<br>
        flex-flow = flex-drection + flex-wrap<br>
        flex-flow相当于规定了flex布局的“工作流(flow)”<br>
        flex-flow: row nowrap;<br>
    </div>
    <div>
        <p>复合属性
            <pre> flex-flow: row nowrap;</pre>
        </p>
        <div class="flex-flow-row-nowarp">
            <div>元1</div>
            <div>元2</div>
            <div>元3</div>
            <div>元4</div>
            <div>元5</div>
        </div>
    </div>
    <div>
        <p>复合属性
            <pre> flex-flow: column nowrap;</pre>
        </p>
        <div class="flex-flow-column-nowarp">
            <div>元1</div>
            <div>元2</div>
            <div>元3</div>
            <div>元4</div>
            <div>元5</div>
        </div>
    </div>
</body>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    body>div:nth-child(1) {
        margin: 0 20px;
        padding: 0 10px;
    }

    body>div:not(:nth-child(1)) {
        margin: 0 20px;
        position: relative;
        float: left;
    }

    .flex-flow-row-nowarp {
        display: flex;
        width: 200px;
        height: 200px;
        border: 1px solid #000;
        background-color: aqua;
        flex-flow: row nowrap;
    }

    .flex-flow-column-nowarp {
        display: flex;
        width: 200px;
        height: 200px;
        border: 1px solid #000;
        background-color: aqua;
        flex-flow: column nowrap;
    }

    .flex-flow-row-nowarp div,
    .flex-flow-column-nowarp div {
        width: 50px;
        height: 50px;
        background-color: blue;
    }
</style>

</html>